<template>
  <div class="my-header-container q-pa-md q-gutter-sm">
    <q-bar class="bg-primary">
      <q-btn flat round icon="menu" @click="leftDrawer = !leftDrawer"/>
      <ToolGroup/>
      <q-space />
      <q-btn flat round icon="menu" @click="rightDrawer = !rightDrawer"/>
      <q-btn flat round icon="mdi-arrow-expand-all"/>
      <q-btn dense flat icon="close" @click="onLoginOut" />
    </q-bar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import MenuItem from 'components/common/MenuItem.vue';
import { useCommonStore } from 'src/stores/commonStore';
import ToolGroup from 'layouts/ToolGroup.vue';

export default defineComponent({
  name: 'HmiHeader',
  components: {
    MenuItem,
    ToolGroup
  },
  setup (props, context) {
    //*********************************************************
    // 路由、store
    //*********************************************************
    const curRouter = useRouter();

    //*********************************************************
    // store
    //*********************************************************
    const commonStore = useCommonStore();
    let {
      leftDrawer,
      rightDrawer
    } = storeToRefs(commonStore);

    //事物撤销与还原
    const fileArr = [
      {
        label: '上传图片',
        icon: 'mdi-cloud-upload-outline',
        callback: null
      }
    ];

    //预览，打开新的页面
    const onLoginOut = () => {
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('user');
      commonStore.initMenus();
      commonStore.initUser();
      commonStore.initToken();

      //跳转到home
      curRouter.push('/auth/login');
    }

    return {
      leftDrawer,
      rightDrawer,
      fileArr,
      onLoginOut
    };
  }
});

</script>

<style lang="scss" scoped>
.my-header-container {
  margin: 0;
  padding: 0;
  height: 50px;
}


</style>
